html {
    width: 100%;
    height: 100%;
    font-size: 62.5%;
}
#app {
    height: 100%;
    width: 100%;
}
body{
    overflow-y: hidden;
    overflow-x: hidden;
}
* {
    padding: 0;
    margin: 0;
}

.img-app {
    width: 2rem;
    height: 2rem;
}


.img-cdh {
    width: 2.3rem;
    height: 2.3rem;
}

.img-vertica {
    width: 1.7rem;
    height: 1.7rem;
}


body {
    width: 100%;
    height: 100%;
    background-image: url(../img/bg.gif);
    /*background-repeat: no-repeat;*/
    /*background-repeat:repeat-x;*/
    /*background-attachment:scroll;*/
    /*background-position: 0px 0px;*/
    background-size: 100% 100%;

}

/* app */
@keyframes fn-app {
    0% {
        transform: rotateX(-26.5deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-26.5deg) rotateY(-360deg);
    }

}

@-moz-keyframes fn-app {
    0% {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

@-ms-keyframes fn-app {
    0% {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

@-webkit-keyframes fn-app {
    0% {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

.box-app {
    z-index: 1000;
    width: 20px;
    height: 20px;
    margin: auto;
    transform-style: preserve-3d;
    transform: rotateX(-10deg);
    animation: fn-app 25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: absolute;
    left: 24.3%;
    top: 36%;
}

/*  cdh  */

@keyframes fn-cdh {
    0% {
        transform: rotateX(-38deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-38deg) rotateY(-360deg);
    }

}

@-moz-keyframes fn-cdh {
    0% {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

@-ms-keyframes fn-cdh {
    0% {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

@-webkit-keyframes fn-cdh {
    0% {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

.box-cdh {
    z-index: 800;
    width: 20px;
    height: 20px;
    margin: auto;
    transform-style: preserve-3d;
    transform: rotateX(-10deg);
    animation: fn-cdh 25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: absolute;
    left: 24.3%;
    top: 47%;
}

/* vertica  */
@keyframes fn-vertica {
    0% {
        transform: rotateX(-29.5deg) rotateY(0deg);
    }
    /*逆时针旋转*/
    100% {
        transform: rotateX(-29.5deg) rotateY(360deg);
    }

}

@-moz-keyframes fn-vertica {
    0% {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

@-ms-keyframes fn-vertica {
    0% {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

@-webkit-keyframes fn-vertica {
    0% {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

.box-vertica {
    z-index: 900;
    width: 20px;
    height: 20px;
    margin: auto;
    transform-style: preserve-3d;
    transform: rotateX(-10deg);
    animation: fn-vertica 25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: absolute;
    left: 24.1%;
    top: 41%;
}

.box-app:hover, .box-cdh:hover, .box-vertica:hover {
    animation-play-state: paused;
}

.box-app > div {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
}

.box-cdh > div {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
}

.box-vertica > div {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
}
